<template>
  <q-page padding>

    <q-dialog v-model="visible" persistent>
      <q-card class="full-width">
        <q-form @submit="onSubmit">
          <q-card-section>
            <div class="text-h6">{{ $t('scripts') }}</div>
          </q-card-section>

          <q-card-section style="max-height: 70vh;" class="scroll">
            <div class="row q-col-gutter-x-md">
              <q-input v-model="form.version" :label="$t('version')" class="col-3" />
              <q-input v-model="form.type" :label="$t('type')" class="col-3" />
            </div>
            <q-input v-model="form.content" :label="$t('content')" type="textarea" autogrow />
          </q-card-section>

          <q-card-actions align="right">
            <q-btn title="cancel" type="reset" unelevated :label="$t('cancel')" v-close-popup />
            <q-btn title="submit" type="submit" flat :label="$t('submit')" color="primary" />
          </q-card-actions>

        </q-form>
      </q-card>
    </q-dialog>

    <q-card flat>
      <q-card-section>
        <q-list v-if="rows && rows.length > 0">
          <q-expansion-item v-for="(items, group) in groupByType(rows, scriptTypeOptions, 'type')" :key="group"
            expand-separator icon="sym_r_database" label="Database">
            <div v-if="items && items.length > 0" class="row q-gutter-md q-pb-md">
              <div class="col" v-for="(item, index) in items" :key="index" @click="showRow(item.id)">
                <q-card flat bordered>
                  <q-card-section>
                    <p class="my-1 text-lg text-[var(--el-text-color-regular)]">
                      {{ item.name }}: {{ item.version }}
                    </p>
                    <p class="my-1 text-sm text-[var(--el-text-color-secondary)]">{{ item.description }}</p>
                    <p class="my-1 text-xs text-[var(--el-text-color-secondary)]">
                      Updated Time: {{ date.formatDate(item.lastModifiedDate, 'YYYY-MM-DD HH:mm') }}
                    </p>
                  </q-card-section>
                </q-card>
              </div>
            </div>
          </q-expansion-item>
        </q-list>
      </q-card-section>
    </q-card>
  </q-page>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { retrieveScripts, fetchScript } from 'src/api/scripts'
import { retrieveDictionarySubset } from 'src/api/dictionaries'
import { date } from 'quasar'
import { groupByType } from 'src/utils'
import type { Script, Dictionary } from 'src/types'


const loading = ref<boolean>(false)
const visible = ref<boolean>(false)

const rows = ref<Array<Script>>([])
const scriptTypeOptions = ref<Array<Dictionary>>([])

const initialValues: Script = {
  id: undefined,
  name: '',
  icon: '',
  version: '',
  content: '',
  description: ''
}
const form = ref<Script>({ ...initialValues })

onMounted(() => {
  onRequest()
  loadScriptType()
})

function onSubmit() {
  // Close the dialog after submitting
  visible.value = false
}

/**
 * 加载列表
 */
async function onRequest() {
  loading.value = true
  retrieveScripts().then(res => {
    rows.value = res.data
  }).finally(() => { loading.value = false })
}

async function loadScriptType() {
  retrieveDictionarySubset(68).then(res => {
    scriptTypeOptions.value = res.data
  })
}
/**
 * 加载
 * @param id 主键
 */
async function loadOne(id: number) {
  form.value = { ...initialValues }
  fetchScript(id).then(res => {
    form.value = res.data
  })
}

function showRow(id: number | undefined) {
  visible.value = true
  if (id) {
    loadOne(id)
  }
}
</script>
